<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单标签</title>
</head>
<body>
<!--
     表单标签使用      实现用户和系统的交互
     form  表单标签
     表单元素  实现表单的组建
-->
<h4>欢迎注册</h4>
<!--
   action: 表单数据发送的服务器地址
   key = value
   readonly  只读
   required  必填项
   placeholder  文本框的提示信息

   发送http请求   请求的格式有几种?
   get    获取数据     默认
   post    添加数据
   put     修改数据
   delete  删除数据
   option  预检请求  多见于前后端分离场景下

   method  设置请求格式
-->
<form action="http://www.baidu.com" method="get">
    <!--    普通文本输入-->
    <p>用户名：<input type="text" value="admin" name="username" placeholder="请输入用户名"></p>
    <!--    密码框-->
    <p>密 码：<input type="password" value="123456" name="password"></p>
    <!--    单选  -->
    <p>
        性别：<input type="radio" name="sex" value="女"> 女
        <input type="radio" name="sex" checked value="男"> 男
        <input type="radio" name="sex" value="不详"> 不详
    </p>
    <!--    复选  -->
    <p>
        兴趣：<input type="checkbox" value="hobby"> 音乐
        <input type="checkbox" checked value="hobby"> 篮球
        <input type="checkbox" checked value="hobby"> 足球
        <input type="checkbox" value="hobby"> 敲代码
    </p>
    <!--    下拉选-->
    <p>
        地址：
        省：<select name="province">
               <option>请选择你的省份</option>
               <option selected>安徽省</option>
               <option>江苏省</option>
               <option>湖南省</option>
           </select>
        市：<select name="city">
               <option>请选择你的市</option>
               <option selected>安庆市</option>
               <option>铜陵市</option>
               <option>合肥市</option>
           </select>
    </p>
    <!--    文本域-->
    <p>
        详细地址：
        <textarea cols="30" rows="5" name="info"></textarea>
    </p>

    <p>
        <input type="submit" value="注册">
        <!--        重置按钮  可以将表单数据重置到页面加载时的效果-->
        <input type="reset" value="重置">
    </p>
</form>

</body>
</html>